<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Auto Portal Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<link href="css/style.css" rel='stylesheet' type='text/css' />
<script src="js/jquery.min.js"></script>
<!---- start-smoth-scrolling---->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
			jQuery(document).ready(function($) {
				$(".scroll").click(function(event){		
					event.preventDefault();
					$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
				});
			});
		</script>
<!--start-smoth-scrolling-->
<!--script-->
	<script src="js/modernizr.custom.97074.js"></script>
<script src="js/jquery.chocolat.js"></script>
		<link rel="stylesheet" href="css/chocolat.css" type="text/css" media="screen" charset="utf-8">
		<!--light-box-files -->
		<script type="text/javascript" charset="utf-8">
		$(function() {
			$('.gallery a').Chocolat();
		});
		</script>
		<script type="text/javascript" src="js/jquery.hoverdir.js"></script>
</head>
<body>
	<!--start-banner-->
	<div class="banner">
		<div class="container">
			<div class="header" id="home">
					<div class="head">
						<div class="logo">
							<a href="index.html"><img src="images/logo.png" alt="" /></a>
						</div>
						<div class="navigation">
							<span class="menu"></span> 
							<ul class="navig">
								<li><a href="index.html"  class="active hvr-bounce-to-bottom scroll">Home</a></li>
								<li><a href="#about" class="hvr-bounce-to-bottom scroll">About</a></li>
								<li><a href="#gallery" class="hvr-bounce-to-bottom scroll">Gallery</a></li>
								<li><a href="#typo" class="hvr-bounce-to-bottom scroll">Typo</a></li>
								<li><a href="#news" class="hvr-bounce-to-bottom scroll">News</a></li>
								<li><a href="#contact" class="hvr-bounce-to-bottom scroll">Contact</a></li>
							</ul>
						</div>
						<div class="clearfix"></div>
					</div>
			</div>	
			<div class="banner-bottom">
				<h1>Welcome to the avengers</h1>
				<p>Three giants</p>
			</div>
			<div class="bnr-btm">
				<a href="#auto" class="scroll"><img src="images/d-arw.png" alt=""></a>
			</div>
		</div>	
	</div>
	<!--end-banner-->
	<!-- script-for-menu -->
		<script>
			$("span.menu").click(function(){
				$(" ul.navig").slideToggle("slow" , function(){
				});
			});
		</script>
	<!--script-for-menu-->
	<!--auto-starts-->
	<div class="auto" id="auto">
		<div class="auto-1">
			<div class="col-md-4 auto-left">
				<img src="images/2.jpg" alt="">
				<div class="tool">
					<a class="tooltips" href="#">
					<span></span></a>
				</div>
			</div>
			<div class="col-md-4 auto-left auto-middle">
				<h2>Iron Man</h2>
				<p>Integer congue tristique</p>
			</div>
			<div class="col-md-4 auto-left auto-right">
				<img src="images/3.jpg" alt="">
				<div class="tool-1">
					<a class="tooltips-1" href="#">
					<span></span></a>
				</div>
			</div>
			<div class="clearfix"></div>	
		</div>
		<div class="auto-1">
			<div class="col-md-4 auto-left auto-middle">
				<h3>Captain American</h3>
				<p>Integer congue tristique</p>
			</div>
			<div class="col-md-4 auto-left">
				<img src="images/1.jpg" alt="">
				<div class="tool">
					<a class="tooltips" href="#">
					<span></span></a>
				</div>
			</div>
			<div class="col-md-4 auto-left auto-middle">
				<h3>Thor</h3>
				<p>Integer congue tristique</p>
			</div>
			<div class="clearfix"></div>	
		</div>
	</div>
	<!--auto-end-->
	<!--about-starts-->
	<div class="about" id="about">
		<div class="container">
			<div class="about-top heading">
				<h3>About</h3>
			</div>
			<div class="about-bottom">
				<div class="col-md-6 about-left">
					<h4>The Avengers is a superhero team under Marvel Comics. It made its debut in "The Avengers" Issue 1 (September 1963). Created jointly by screenwriter Stan Lee and painter Jack Kirby, it is called "the strongest superhero team on earth".</h4>
					<p>The founders were Iron Man, Thor, Hulk, Ant Man and Huang Fengxia. From the very beginning, The Avengers's membership list has been constantly changing. The Hulk left the team in Phase II and was replaced by the captain of the United States.</p>
				</div>	
				<div class="col-md-6 about-right">
					<div class="abt-one">
						<div class="abt-left">
							<span class="glyphicon glyphicon-gift" aria-hidden="true"></span>
						</div>	
						<div class="abt-right">
							<p>The constantly changing membership list has become a feature of The Avengers, but one theme has never changed, that is, to fight enemies that a single superhero cannot cope with, and that is their famous battle slogan, "Avengers, gather!" (Avengers Assemble) Origin.
</p>
						</div>	
						<div class="clearfix"></div>	
					</div>
					<div class="abt-one">
						<div class="abt-left">
							<span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
						</div>	
						<div class="abt-right">
							<p></p>
						</div>	
						<div class="clearfix"></div>	
					</div>					
				</div>	
				<div class="clearfix"></div>	
			</div>
		</div>
	</div>	
	<!--about-end-->
	<!--people-starts-->
	<div class="people">
		<div class="container">
			<div class="people-top heading">
				<h3>创作者介绍</h3>
			</div>
			<div class="people-bottom">
				<div class="col-md-6 people-left">
					<div class="p-left">
						<img src="images/5.jpg" alt="" />
					</div>	
					<div class="p-right">
						<h4>斯坦·李</h4>
						<p>Stan Lee (Stan Lee, December 28, 1922-November 12, 2018), male, born in new york, USA, is a cartoon creator, actor and screenwriter. Starting in November 1961, with the help of his partner cartoonist Jack Kirby, he created comic characters such as Spider-Man, Iron Man and Thor. He has guest starred in Spider-Man, Iron Man, Captain America, Thor, The Avengers and other Marvel movies.</p>
					</div>	
					<div class="clearfix"></div>	
				</div>	
				<div class="col-md-6 people-left">
					<div class="p-left">
						<img src="images/p-2.jpg" alt="" />
					</div>	
					<div class="p-right">
						<h4>杰克·科比</h4>
						<p>Jack Kirby was born in new york on August 28, 1917. He is a famous American cartoonist, editor and screenwriter. He is one of the most famous and prolific cartoonists in modern American cartoonists. Captain America, Hulk, Iron Man, etc.</p>
					</div>	
					<div class="clearfix"></div>	
				</div>	
				<div class="clearfix"></div>	
			</div>
		</div>
	</div>	
	<!--people-end-->
    <div class="copyrights">Collect from <a href="http://www.cssmoban.com/" >企业网站模板</a></div>
	<!--choose-starts-->
	<div class="choose">
		<div class="container">
			<div class="choose-top heading">
				<h3>电影系列</h3>
			</div>
			<div class="choose-bottom">
				<div class="choose-1">
					<div class="col-md-6 choose-left">
						<div class="c-left">
							<h4>钢铁侠三部曲1-</h4>
							<p>钢铁侠1 钢铁侠2 钢铁侠3</p>
						</div>
						<div class="c-right">
							<span class="glyphicon glyphicon-globe" aria-hidden="true"></span>
						</div>
						<div class="clearfix"></div>
					</div>
					<div class="col-md-6 choose-left">
						<div class="c-left">
							<h4>雷神三部曲</h4>
							<p>雷神1 雷神2 雷神3</p>
						</div>
						<div class="c-right">
							<span class="glyphicon glyphicon-wrench" aria-hidden="true"></span>
						</div>
						<div class="clearfix"></div>
					</div>
					<div class="clearfix"></div>
				</div>
				<div class="choose-1">
					<div class="col-md-6 choose-left">
						<div class="c-left">
							<h4>美国队长三部曲</h4>
							<p>美队1 美队2 美队3</p>
						</div>
						<div class="c-right">
							<span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>
						</div>
						<div class="clearfix"></div>
					</div>
					<div class="col-md-6 choose-left">
						<div class="c-left">
							<h4>复仇者联盟1-4</h4>
							<p>复仇者联盟1 复仇者联盟2 复仇者联盟3 复仇者联盟4 </p>
						</div>
						<div class="c-right">
							<span class="glyphicon glyphicon-time" aria-hidden="true"></span>
						</div>
						<div class="clearfix"></div>
					</div>
					<div class="clearfix"></div>
				</div>
				<div class="choose-1">
					<div class="col-md-6 choose-left">
						<div class="c-left">
							<h4>独立电影</h4>
							<p>绿巨人 蚁人1-2 惊奇队长 </p>
						</div>
						<div class="c-right">
							<span class="glyphicon glyphicon-certificate" aria-hidden="true"></span>
						</div>
						<div class="clearfix"></div>
					</div>
					<div class="col-md-6 choose-left">
						<div class="c-left">
							<h4>未来系列</h4>
							<p>黑豹 奇异博士 银河护卫队 黑寡妇 蜘蛛侠</p>
						</div>
						<div class="c-right">
							<span class="glyphicon glyphicon-signal" aria-hidden="true"></span>
						</div>
						<div class="clearfix"></div>
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
		</div>
	</div>	
	<!--choose-end-->
	<!--typo-starts-->
	<div class="typo" id="typo">
		<div class="container">
			<div class="typo-top heading">
				<h3>Typo</h3>
			</div>
			<div class="typo-bottom">
				<div class="progress-bars">
					<h3 class="ghj">Progress Bars</h3>
						<div class="tab-content">
							<div class="tab-pane active" id="domprogress">
								<div class="progress">    
									<div class="progress-bar progress-bar-primary" style="width: 20%"></div>
								</div>
								<p>Info with <code>progress-bar-info</code> class.</p>
								<div class="progress">    
									<div class="progress-bar progress-bar-info" style="width: 60%"></div>
								</div>
								<p>Success with <code>progress-bar-success</code> class.</p>
								<div class="progress">
									<div class="progress-bar progress-bar-success" style="width: 30%"></div>
								</div>
								<p>Warning with <code>progress-bar-warning</code> class.</p>
								<div class="progress">
									<div class="progress-bar progress-bar-warning" style="width: 70%"></div>
								</div>
								<p>Danger with <code>progress-bar-danger</code> class.</p>
								<div class="progress">
									<div class="progress-bar progress-bar-danger" style="width: 50%"></div>
								</div>
								<p>Inverse with <code>progress-bar-inverse</code> class.</p>
								<div class="progress">
									<div class="progress-bar progress-bar-inverse" style="width: 40%"></div>
								</div>
								<p>Inverse with <code>progress-bar-inverse</code> class.</p>
								<div class="progress">
									<div class="progress-bar progress-bar-success" style="width: 35%"><span class="sr-only">35% Complete (success)</span></div>
									<div class="progress-bar progress-bar-warning" style="width: 20%"><span class="sr-only">20% Complete (warning)</span></div>
									<div class="progress-bar progress-bar-danger" style="width: 10%"><span class="sr-only">10% Complete (danger)</span></div>
								</div>
							</div>
						</div>
				</div>
			</div>
			<div class="pagenatin">
				<h3 class="ghj">Pagination</h3>
					<div class="col-md-6">
					  <nav>
					  <ul class="pagination pagination-lg">
						<li><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
						<li><a href="#">1</a></li>
						<li><a href="#">2</a></li>
						<li><a href="#">3</a></li>
						<li><a href="#">4</a></li>
						<li><a href="#">5</a></li>
						<li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
					  </ul>
					  </nav>
					  <nav>
					  <ul class="pagination">
						<li><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
						<li><a href="#">1</a></li>
						<li><a href="#">2</a></li>
						<li><a href="#">3</a></li>
						<li><a href="#">4</a></li>
						<li><a href="#">5</a></li>
						<li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
					  </ul>
					  </nav>
					  <nav>
						<ul class="pagination pagination-sm">
							<li><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
							<li><a href="#">1</a></li>
							<li><a href="#">2</a></li>
							<li><a href="#">3</a></li>
							<li><a href="#">4</a></li>
							<li><a href="#">5</a></li>
							<li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
						</ul>
					  </nav>
					</div>
					<div class="col-md-6">
						<nav>
							<ul class="pagination pagination-lg">
									<li class="disabled"><a href="#"><i class="fa fa-angle-left">«</i></a></li>
									<li class="active"><a href="#">1</a></li>
									<li><a href="#">2</a></li>
									<li><a href="#">3</a></li>
									<li><a href="#">4</a></li>
									<li><a href="#">5</a></li>
									<li><a href="#"><i class="fa fa-angle-right">»</i></a></li>
							</ul>
						</nav>
						<nav>
						  <ul class="pagination">
							<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
							<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
							<li><a href="#">2</a></li>
							<li><a href="#">3</a></li>
							<li><a href="#">4</a></li>
							<li><a href="#">5</a></li>
							<li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
						 </ul>
					    </nav>
					    <nav>
							 <ul class="pagination pagination-sm">
								<li class="disabled"><a href="#"><i class="fa fa-angle-left"></i>«</a></li>
								<li class="active"><a href="#">1</a></li>
								<li><a href="#">2</a></li>
								<li><a href="#">3</a></li>
								<li><a href="#">4</a></li>
								<li><a href="#">5</a></li>
								<li><a href="#"><i class="fa fa-angle-right"></i>»</a></li>
							</ul>
						</nav>
					</div>
					<div class="clearfix"> </div>
			</div>
			<div class="appearance">
			 <h3 class="ghj">Badges</h3>
				<div class="col-md-6">
					<p>Add modifier classes to change the appearance of a badge.</p>
					  <table class="table table-bordered">
						<thead>
							<tr>
								<th width="50%">Classes</th>
								<th width="50%">Badges</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>No modifiers</td>
								<td><span class="badge">42</span></td>
							</tr>
							<tr>
								<td><code>.badge-primary</code></td>
								<td><span class="badge badge-primary">1</span></td>
							</tr>
							<tr>
								<td><code>.badge-success</code></td>
								<td><span class="badge badge-success">22</span></td>
							</tr>
							<tr>
								<td><code>.badge-info</code></td>
								<td><span class="badge badge-info">30</span></td>
							</tr>
							<tr>
								<td><code>.badge-warning</code></td>
								<td><span class="badge badge-warning">412</span></td>
							</tr>
							<tr>
								<td><code>.badge-danger</code></td>
								<td><span class="badge badge-danger">999</span></td>
							</tr>
						</tbody>
					</table>                    
				</div>
				<div class="col-md-6">
				  <p>Easily highlight new or unread items with the <code>.badge</code> class</p>
					<div class="list-group list-group-alternate"> 
						<a href="#" class="list-group-item"><span class="badge">201</span> <i class="ti ti-email"></i> Inbox </a> 
						<a href="#" class="list-group-item"><span class="badge badge-primary">5021</span> <i class="ti ti-eye"></i> Profile visits </a> 
						<a href="#" class="list-group-item"><span class="badge">14</span> <i class="ti ti-headphone-alt"></i> Call </a> 
						<a href="#" class="list-group-item"><span class="badge">20</span> <i class="ti ti-comments"></i> Messages </a> 
						<a href="#" class="list-group-item"><span class="badge badge-warning">14</span> <i class="ti ti-bookmark"></i> Bookmarks </a> 
						<a href="#" class="list-group-item"><span class="badge badge-danger">30</span> <i class="ti ti-bell"></i> Notifications </a> 
					</div>
			    </div>
			   <div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!--typo-end-->
	<!--gallery-starts-->
	<div class="gallery" id="gallery">
			<div class="gallery-top heading">
				<h3>主要成员（中文介绍）</h3>
			</div>
			<div class="gallery-bottom">
			<section>
				<ul id="da-thumbs" class="da-thumbs">
					<li>
						<a href="images/g-1.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
							<img src="images/g-1.jpg" alt="" />
							<div>
								<h5>鹰眼浪人</h5>
								<span></span>
							</div>
						</a>
					</li>
					<li>
						<a href="images/g-2.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
							<img src="images/g-2.jpg" alt="" />
							<div>
								<h5>黑寡妇</h5>
								<span></span>
							</div>
						</a>
					</li>
					<li>
						<a href="images/g-3.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
							<img src="images/g-3.jpg" alt="" />
							<div>
								<h5>绿巨人</h5>
								<span></span>
							</div>
						</a>
					</li>
					<li>
						<a href="images/g-4.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
							<img src="images/g-4.jpg" alt="" />
							<div>
								<h5>蜘蛛侠</h5>
								<span></span>
							</div>
						</a>
					</li>
					<li>	
						<a href="images/g-5.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
							<img src="images/g-5.jpg" alt="" />
							<div>
								<h5>黑豹</h5>
								<span></span>
							</div>
						</a>
					</li>
					<li>
						<a href="images/g-6.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
							<img src="images/g-6.jpg" alt="" />
							<div>
								<h5>惊奇队长</h5>
								<span></span>
							</div>
						</a>
					</li>
					<li>
						<a href="images/g-7.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
							<img src="images/g-7.jpg" alt="" />
							<div>
								<h5>奇异博士</h5>
								<span></span>
							</div>
						</a>
					</li>
					<li>
						<a href="images/g-8.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
							<img src="images/g-8.jpg" alt="" />
							<div>
								<h5>猎鹰</h5>
								<span></span>
							</div>
						</a>
					</li>
					<li>
						<a href="images/g-9.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
							<img src="images/g-9.jpg" alt="" />
							<div>
								<h5>冬兵</h5>
								<span></span>
							</div>
						</a>
					</li>
					<li>
						<a href="images/g-10.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
							<img src="images/g-10.jpg" alt="" />
							<div>蚁人</h5>
								<span></span>
							</div>
						</a>
					</li>
					<div class="clearfix"> </div>
				</ul>
			</section>
			</div>	
		<script type="text/javascript">
			$(function() {
			
				$(' #da-thumbs > li ').each( function() { $(this).hoverdir(); } );

			});
		</script>
	</div>
	<!--gallery-end-->
	<!--news-starts-Here-->
		<div class="news" id="news">
			<div class="container">
				<div class="news-main">
					<div class="news-top heading">
						<h3>Our News</h3>
						<p> </p>
					</div>
					<div class="news-bottom-one">
						<div class="col-md-2 news-bottom-left">					
							<h3> </h3>
							<p> </p>
						</div>
						<div class="col-md-10 news-bottom-right">
							<p> </p>
							<div class="bn">
								<a href="#">Read More</a>
							</div>												
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="news-bottom-one">
						<div class="col-md-2 news-bottom-left">							
							<h3> </h3>
							<p> </p>
						</div>										
						<div class="col-md-10 news-bottom-right">												
							<p> </p>
							<div class="bn">
								<a href="#">Read More</a>
							</div>											
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="news-bottom-one">
						<div class="col-md-2 news-bottom-left">										
							<h3> </h3>
							<p> </p>												
						</div>
						<div class="col-md-10 news-bottom-right">							
							<p> </p>
							<div class="bn">
								<a href="#">Read More</a>
							</div>
						</div>									
						<div class="clearfix"> </div>
					</div>
				</div>
			</div>
		</div>
	<!--news-Ends-Here-->
	<!--contact-starts-->
	<div class="contact" id="contact">
		<div class="container">
			<div class="contact-top">
				<div class="col-md-4 contact-left">
					<div class="add1">
						<span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>
						<p>The company name, Glasglow Dr 40 Fe 72.</p>
					</div>
					<div class="add1">
						<span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>
						<p>+755 265 8822 , +955 326 3695</p>
					</div>
					<div class="add1">
						<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
						<p>Email: <a href="mailto:example@email.com">contact@example.com</a></p>
					</div>
				</div>	
				<div class="col-md-8 contact-right">
					<input type="text" value="Your name" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Your name';}">
			        <input type="text" value="Your mail" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Your mail';}">
					<textarea value="Your message" onFocus="if(this.value == 'Your message') this.value='';" onBlur="if(this.value == '') this.value='Your message';">Your message</textarea><br>
			     	 <div class="submit">
			     	 	<input type="submit" value="Send Message">
			     	 </div>    
				</div>	
				<div class="clearfix"></div>	
			</div>
		</div>
	</div>
	<!--contact-end-->
	<!--footer-starts-->
	<div class="footer">
		<div class="container">
			<div class="footer-top">
				<a href="#"><img src="images/logo.png" alt="" ></a>
				<ul>
					<li><a href="#"><span class="fb"></span></a></li>
					<li><a href="#"><span class="twit"></span></a></li>
					<li><a href="#"><span class="google"></span></a></li>
					<li><a href="#"><span class="pin"></span></a></li>
				</ul>
				<p>Copyright &copy; 2015.Company name All rights reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
			</div>
		</div>
		<script type="text/javascript">
									$(document).ready(function() {
										/*
										var defaults = {
								  			containerID: 'toTop', // fading element id
											containerHoverID: 'toTopHover', // fading element hover id
											scrollSpeed: 1200,
											easingType: 'linear' 
								 		};
										*/
										
										$().UItoTop({ easingType: 'easeOutQuart' });
										
									});
								</script>
		<a href="#home" id="toTop" class="scroll" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
	</div>
	<!--footer-end-->
</body>
</html>